<template>
  <div class="app-container">
    <div class="main">
      <div class="foot">
        <el-form ref="form"
                 class="foot-content"
                 :rules="rules"
                 :model="form"
                 label-width="120px">
          <div class="table-title"
               style="margin-bottom:20px">
            <span class="title-text">订单信息</span>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="舱位名："
                            prop="product_name">
                <el-input v-model="form.product_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输号："
                            prop="trans_name">
                <el-input v-model="form.trans_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="运输方式："
                            prop="product_type">
                <el-select v-model="form.product_type"
                           class="inputstyle">
                  <el-option label="海运"
                             value="sea" />
                  <el-option label="陆运"
                             value="line" />
                  <el-option label="空运"
                             value="air" />
                  <el-option label="铁路"
                             value="railway" />
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="货主名："
                            prop="product_name">
                <el-input v-model="form.product_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货物名称："
                            prop="trans_name">
                <el-input v-model="form.trans_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货物类型："
                            prop="product_type">
                <el-select v-model="form.product_type"
                           class="inputstyle">
                  <el-option label="海运"
                             value="sea" />
                  <el-option label="陆运"
                             value="line" />
                  <el-option label="空运"
                             value="air" />
                  <el-option label="铁路"
                             value="railway" />
                </el-select>
              </el-form-item>
            </el-col>
          </div>

          <div style="display:flex;justify-content: space-between">
            <el-col :span="8">
              <el-form-item label="小拼箱："
                            prop="service_type">
                <el-switch v-model="form.service_type" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="箱子类型："
                            prop="box_type">
                <el-select v-model="form.box_type"
                           class="inputstyle">
                  <el-option label="干货箱"
                             value="干货箱" />
                  <el-option label="干货高箱"
                             value="干货高箱" />
                  <el-option label="挂衣箱"
                             value="挂衣箱" />
                  <el-option label="开顶箱"
                             value="开顶箱" />
                  <el-option label="冷冻箱"
                             value="冷冻箱" />
                  <el-option label="冷高箱"
                             value="冷高箱" />
                  <el-option label="油罐箱"
                             value="油罐箱" />
                  <el-option label="框架箱"
                             value="框架箱" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="箱子尺寸："
                            prop="box_length">
                <el-select v-model="form.box_length"
                           class="inputstyle">
                  <el-option label="20英尺"
                             value="20" />
                  <el-option label="35英尺"
                             value="35" />
                  <el-option label="40英尺"
                             value="40" />
                  <el-option label="45英尺"
                             value="45" />
                </el-select>
              </el-form-item>
            </el-col>

          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="计划出发时间："
                            prop="end_time">
                <el-date-picker v-model="form.end_time"
                                type="datetime"
                                placeholder="选择日期时间"
                                class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际出发时间："
                            prop="etd_time">
                <el-date-picker v-model="form.etd_time"
                                type="datetime"
                                placeholder="选择日期时间"
                                class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划到达时间："
                            prop="eta_time">
                <el-date-picker v-model="form.eta_time"
                                type="datetime"
                                placeholder="选择日期时间"
                                class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="实际到达时间："
                            prop="eta_time">
                <el-date-picker v-model="form.eta_time"
                                type="datetime"
                                placeholder="选择日期时间"
                                class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="12">
              <el-form-item label="出发地名："
                            prop="start_point_name">
                <el-input v-model="form.start_point_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="出发地编码："
                            prop="start_point">
                <el-input v-model="form.start_point"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的地名："
                            prop="end_point_name">
                <el-input v-model="form.end_point_name"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的地编码："
                            prop="end_point">
                <el-input v-model="form.end_point"
                          class="inputstyle" />
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="8">
              <el-form-item label="总重量(KGS)："
                            prop="box_payload">
                <el-input-number v-model="form.box_payload"
                                 :step="1000"
                                 size="small"
                                 :min="1000" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总长宽高(CBM)："
                            prop="box_volume">
                <el-input-number v-model="form.box_volume"
                                 :step="1"
                                 size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总价格(CNY)："
                            prop="product_price">
                <el-input-number v-model="form.product_price"
                                 :step="1"
                                 size="small" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="支付条款："
                            prop="product_paytype">
                <el-select v-model="form.product_paytype"
                           class="inputstyle">
                  <el-option label="预付"
                             value="预付" />
                  <el-option label="第三方支付"
                             value="第三方支付" />
                  <el-option label="到付"
                             value="到付" />
                </el-select>
              </el-form-item>
            </el-col>
          </div>
          <div style="display:flex;justify-content: space-between">
            <el-col :span="15">
              <el-form-item label="订单备注：">
                <el-input v-model="form.product_remark"
                          type="textarea" />
              </el-form-item>
            </el-col>
          </div>
          <el-form-item style="display:flex;justify-content: space-between;">
            <el-button type="primary"
                       @click="updateForm('form')">保存修改</el-button>
            <el-button style="margin-left:50px"
                       @click="auditForm('form')">提交审核</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>
<script>
import ordersApi from '@/api/orders'

// import ImageCropper from '@/components/ImageCropper'
// import PanThumb from '@/components/PanThumb'

export default {
  // components: { ImageCropper, PanThumb },
  data () {
    return {
      form: {
      },

      // 上传弹框组件是否显示
      imagecropperShow: false,
      imagecropperKey: 0, // 上传组件key值
      BASE_API: process.env.BASE_API, // 获取dev.env.js里面地址
      saveBtnDisabled: false // 保存按钮是否禁用,
    }
  },
  watch: { // 监听
    $route (to, from) { // 路由变化方式，路由发生变化，方法就会执行
      this.init()
    }
  },
  created () { // 页面渲染之前执行
    this.init()
  },
  methods: {
    init () {
      // 判断路径有id值,做修改
      if (this.$route.params && this.$route.params.id) {
        // 从路径获取id值
        const id = this.$route.params.id
        // 调用根据id查询的方法
        this.getInfo(id)
      } else { // 路径没有id值，做添加
        // 清空表单
        this.form = {}
      }
    },
    // 根据id查询
    getInfo (id) {
      ordersApi.getOrdersInfo(id)
        .then(response => {
          console.log(response)
          this.form = response[0]
        })
    },
    // 修改讲师的方法
    updateForm () {
      this.$message({
        type: 'success',
        message: `订单修改成功!`
      })
      // ordersApi.updateOrderId(this.form)
      //   .then(response => {
      //     this.$message({
      //       type: 'success',
      //       message: `订单：${this.form.order_id}修改成功!`
      //     })
      //     this.$router.push({ path: '/orders/index' })
      //   })
    },
    // 审核
    auditForm () {
      this.$confirm('', '确认审核', {
        confirmButtonText: '通过',
        cancelButtonText: '不通过',
        type: 'info',
        center: true
      }).then(() => {
        this.form.order_status = 1
        this.form.update_time = this.utils.getNowTime()
        ordersApi.updateOrderId(this.form)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'success',
              message: `订单${this.form.order_id},审核通过`
            })
            // 回到列表页面 路由跳转
            this.$router.push({ path: '/orders/index' })
          })
      }).catch(() => {
        this.form.order_status = 0
        this.form.update_time = this.utils.getNowTime()
        ordersApi.updateOrderId(this.form)
          .then(response => {
            // 提示信息
            console.log(response)
            this.$message({
              type: 'warning',
              message: `订单${this.form.order_id},审核不通过`
            })
            // 回到列表页面 路由跳转
            this.$router.push({ path: '/orders/index' })
          })
      })
    }
    // // 添加讲师的方法
    // saveproduct () {
    //   productsApi.addproduct(this.product)
    //     .then(response => { // 添加成功
    //       // 提示信息
    //       this.$message({
    //         type: 'success',
    //         message: '添加成功!'
    //       })
    //       // 回到列表页面 路由跳转
    //       this.$router.push({ path: '/product/table' })
    //     })
    // }

  }
}
</script>

<style lang="less" scoped>
.table-title {
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 34px;
}
.title-text {
  color: #000;
  font-size: 16px;
  padding-top: 4px;
  font-weight: 700;
  border-bottom: 2px solid #07467c;
}
.inputstyle {
  width: 250px;
}
</style>
